<!DOCTYPE html>
<html> 
<head> 
<meta charset="utf-8"> 
<meta name=viewport content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
	<div role="main" class="ui-content">
		<input type="text" name="userid" id="userid" value="" placeholder="Pick Your Username">
		<input type="password" name="passwd" id="passwd" value="" placeholder="Choose a Password">
		<input type="password" name="repasswd" id="repasswd" value="" placeholder="Confirm the Password">
		<a id="signup" href="#" class="ui-btn ui-btn-b ui-btn-inline" data-inline="true">Sign up</a>
		<a id="cancel" href="welcome.html" class="ui-btn ui-btn-inline" data-inline="true">Cancel</a>
	</div>
</body>
<script>
Android.showToast("Username may not be less than 6 letters.");
$("#signup").click(function(){
	var userid = $("#userid").val();
	if(userid.length <= 6) {
		Android.showToast("Username may not be less than 6 letters.");
		return;
	}

	var passwd, repasswd;
	passwd = $("#passwd").val();
	repasswd = $("#repasswd").val();

	if(passwd === repasswd)
		Android.signUp(userid, $("#passwd").val());
	else
		Android.showToast("Password doesn't match confirmation.");
});
</script>
</html>
